<template>
  <div>
    <el-tooltip v-bind="props" :disabled="disabled">
      <div ref="textRef" class="overflow-text truncate" :style="{ textOverflow: overfloType }">
        {{ content }}
      </div>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { useEventListener } from '@vueuse/core'
import { useTooltipContentProps, type Placement } from 'element-plus'
import type { PropType } from 'vue'

const props = defineProps({
  ...useTooltipContentProps,
  teleported: {
    type: Boolean,
    default: false
  },
  placement: {
    type: String as PropType<Placement>,
    default: 'top'
  },
  overfloType: {
    type: String as PropType<'ellipsis' | 'unset' | 'clip'>,
    default: 'ellipsis'
  }
})
const textRef = shallowRef<HTMLElement>()
const disabled = ref(false)

useEventListener(textRef, 'mouseenter', () => {
  if (textRef.value?.scrollWidth! > textRef.value?.offsetWidth!) {
    disabled.value = false
  } else {
    disabled.value = true
  }
})
</script>

<style></style>
